<template>
  <h1>杨硕个人简历练习</h1>
  <table border="1px">
    <tr >
      <td>照片：</td>
      <td><img :src="person.imgUrl" width="150"></td>
    </tr>
    <tr >
      <td>姓名：</td>
      <td>{{person.name}}</td>
    </tr>
    <tr >
      <td>年龄：</td>
      <td>{{person.age}}</td>
    </tr>
    <tr >
      <td>好友：</td>
      <td><li v-for="item in person.friends">{{item}}</li></td>
    </tr>
  </table>
  <button @click="loadData">点击加载数据</button>
</template>
<script setup>
//1.定义对象，用于数据绑定
import {ref} from "vue";

const person=ref({
  name:'',
  age:'',
  imgUrl:'',
  friends:[]
});
//2.定义加载数据的方法
const loadData=()=>{
  person.value={
    name:'杨硕',
    age:'18',
    imgUrl:'小埋埋.jpeg',
    friends:['徐志杰一号','徐志杰二号','徐志杰三号']
  }
}
</script>


<style scoped>

</style>